<template>
<div>
  <div class="upload_box">
        <div class="upload_component">
          <el-upload class="upload"
                drag 
                 ref="upload"
                 action="string"
                 :file-list="fileList"	
                 :auto-upload="false"	
                 :http-request="uploadFile"	
                 :on-change="handleChange"
                 :on-preview="handlePreview"
                 :on-remove="handleRemove"
                 list-type="file"
                 multiple="multiple">	
                 <i class="el-icon-upload"></i>
            <div class="el-upload__text">
                将文件拖到此处，或<em>点击上传</em>
            </div>
      </el-upload>
    <el-button type="primary" @click="onSubmit" style="display">保存</el-button>
        </div>
    </div>
    <div class="upload_box">
        <div class="upload_component">
          <el-descriptions class="margin-top" title="代码行解析结果" :column="3" :size="size" border>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        空行数
      </template>
      {{  code_lines_data.nullLines}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        注释行数
      </template>
      {{  code_lines_data.annoLines}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        非注释行数
      </template>
      {{  code_lines_data.codeLines}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        物理代码行数
      </template>
{{  code_lines_data.allLines}}
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-office-building"></i>
        逻辑代码行数
      </template>
      {{  code_lines_data.logicLines}}
    </el-descriptions-item>
  </el-descriptions>
        </div>
    </div>
    <div class="table_box">
        <div class="table_component">
          <el-table
    :data="ast_data"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-table
        style="width: 100%" :data= props.row.methodList  
        :row-class-name="tableRowClassName" inline class="demo-table-expand">
        <el-table-column
          prop="methodName"
          label="方法名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="accessAuthority"
          label="访问权限"
          width="180">
        </el-table-column>
        <el-table-column
          prop="returnType"
          label="返回值">
        </el-table-column>
      </el-table>
      </template>
    </el-table-column>
    <el-table-column
      label="类名"
      prop="className">
    </el-table-column>
  </el-table>
        </div>
    </div>
</div>
</template>

<script>
  module.exports ={
    data () {
      return {
        fileList: [],
      // 不支持多选
      multiple: false,
      formData: "",
        code_lines_data:  {
  },
  ast_data: [
  
  ],
      };
    },
    methods:{
//点击上传文件触发的额外事件,清空fileList
delFile :function () {
      this.fileList = [];
    },
    handleChange :function (file, fileList) {
      this.fileList = fileList;
      // console.log(this.fileList, "sb");
    },
    //自定义上传文件
    uploadFile :function (file) {
      this.formData.append("file", file.file);
      // console.log(file.file, "sb2");
    },
    //删除文件
    handleRemove :function (file, fileList) {
      console.log(file, fileList);
    },
    // 点击文件
    handlePreview :function (file) {
      console.log(file);
    },
    //保存按钮
    onSubmit :function() {
        console.log("保存文件")
        let formData = new FormData();
        formData.append("javaFile", this.fileList[0].raw);//拿到存在fileList的文件存放到formData中
       //下面数据是我自己设置的数据,可自行添加数据到formData(使用键值对方式存储)
        formData.append("title", this.title);
        axios.post("http://localhost:8080/api/AST/ASTControl", formData, {
        "Content-Type": "multipart/form-data;charset=utf-8"
      })
        .then(res => {
          if (res.data.msg === "success") {
            this.ast_data = res.data.data
            this.$notify({
              title: '成功',
              message: '提交成功',
              type: 'success',
              duration: 1000
            });
          }
        })

        axios.post("http://localhost:8080/api/CodeLines/codeLine", formData, {
        "Content-Type": "multipart/form-data;charset=utf-8"
      })
        .then(res => {
          this.code_lines_data = res.data.data
          if (res.data === "SUCCESS") {
            this.$notify({
              title: '成功',
              message: '提交成功',
              type: 'success',
              duration: 1000
            });
          }
        })
    }
}
  }
</script>